<script>
import { getFetchDataRes, fuzzySearchWithRegex } from './func.js';
export default {
	name: 'AccountPage',
	data() {
		return {
			formData: {
				name: '',
				email: '',
			},
			listData: [
				{ age: 1, name: 'Alice', email: 111111 },
				{ age: 2, name: 'Bob', email: 2222222 },
				{ age: 3, name: 'Charlie', email: 33333 },
				{ age: 4, name: 'Alice', email: 33333 },
			],
			resData: [],
		};
	},
	methods: {
		handleSubmit() {
			console.log('submit', this.formData);
			this.resData = fuzzySearchWithRegex(this.listData, this.formData);
			// this.listData = this.resData;
		},
	},

	created() {
		getFetchDataRes()
			.then((data) => {
				console.log('data', data);
			})
			.catch((error) => {
				console.error('Error', error);
			});
	},
};
</script>

<template>
	<div class="container">
		<form @submit.prevent="handleSubmit">
			<div class="inputBox">
				<label for="name">姓名</label>
				<input type="text" id="name" v-model="formData.name" />
			</div>
			<div class="inputBox">
				<label for="email">邮箱</label>
				<input type="text" id="email" v-model="formData.email" />
			</div>
			<button type="submit">提交</button>
		</form>
		<pre>{{ resData }}</pre>
		<ul>
			<li v-for="item in listData ?? resData" :key="item.age">
				{{ item.name }} - {{ item.age }}
			</li>
		</ul>
	</div>
</template>

<style scoped>
.container {
	width: 100%;
	height: 100%;
	background-color: #282828;
	padding: 20px;
	color: #f5f5f5;
}
</style>
